import { FC, ReactElement } from "react";
import { useParams } from "react-router-dom";
import useQRCodeInfo from "../../hooks/useQRCodeInfo";
import About from "../QRCodeGenerate/About";
import { Container } from "../QRCodeGenerate/styled";
import styled from "styled-components";
import { imgBaseUrl } from "../../constant/config";

interface IProps {}
const QRCodePreview: FC<IProps> = (): ReactElement => {
  let content: any = null;
  const { id }: { id: string } = useParams();
  const [loading, QRCode, error] = useQRCodeInfo(id);
  console.log(QRCode);

  if (loading) {
    content = <span style={{ textAlign: "center" }}>加载中...</span>;
  }
  if (error) {
    content = <span style={{ textAlign: "center" }}>加载错误🤔</span>;
  }

  return (
    <div
      style={{
        display: "flex",
        justifyContent: QRCode.title ? "flex-start" : "center",
        alignItems: "center",
        flexDirection: "column",
        height: "100vh",
        width: "100vw",
      }}
    >
      {content || (
        <>
          <Container>
            <img src={imgBaseUrl + QRCode.img} alt="" />
          </Container>
          <Headline>{QRCode.title}</Headline>
          <Headline color="red">{QRCode.price}</Headline>
          <About />
        </>
      )}
    </div>
  );
};

export default QRCodePreview;

const Headline = styled.h2`
  color: ${(props) => props.color || "#000"};
  margin: 0.5rem;
`;
